
<template>
  <div class="graphic-navigation-panel">
    <el-form label-width="80px" :model="data" size="small">
      <el-form-item label="导航类型">
        <el-radio-group v-model="data.navigationType">
          <el-radio label="image">图片导航</el-radio>
          <el-radio label="icon">图标导航</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="布局方式">
        <el-radio-group v-model="data.layout">
          <el-radio label="grid">网格布局</el-radio>
          <el-radio label="scroll">横向滚动</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-if="data.layout === 'grid'" label="每行显示">
        <el-input-number 
          v-model="data.columns" 
          :min="2" 
          :max="5" 
          size="small"
        />
      </el-form-item>

      <el-form-item v-else label="显示个数">
        <el-input-number 
          v-model="data.showSize" 
          :min="2" 
          :max="10" 
          size="small"
        />
      </el-form-item>

      <el-form-item label="对齐方式">
        <el-radio-group v-model="data.justifyContent">
          <el-radio label="space-evenly">均匀分布</el-radio>
          <el-radio label="space-around">环绕分布</el-radio>
          <el-radio label="flex-start">左对齐</el-radio>
          <el-radio label="center">居中</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-divider>导航项管理</el-divider>

      <el-form-item label="导航项">
        <div class="navigation-items">
          <div
            v-for="(item, index) in data.items"
            :key="index"
            class="navigation-item"
          >
            <div class="item-header">
              <span class="item-index">{{ index + 1 }}</span>
              <el-button
                type="danger"
                icon="Delete"
                circle
                size="small"
                @click="removeItem(index)"
              />
            </div>
            
            <div class="item-content">
              <el-form-item label="导航文字" label-width="70px">
                <el-input
                  v-model="item.text"
                  placeholder="请输入导航文字"
                  size="small"
                />
              </el-form-item>            

              <el-form-item label="跳转链接" label-width="70px">
                <el-input
                  v-model="item.url"
                  placeholder="请输入跳转链接"
                  size="small"
                />
              </el-form-item>

              <div v-if="data.navigationType === 'image'" class="image-picker-container">
                <ImagePicker
                  :initial-image="item.image ? { url: item.image } : null"
                  @select="(image) => handleItemImageSelect(image, index)"
                  :hide-preview="false"
                />
              </div>

              <el-form-item v-else label="图标名称" label-width="70px">
                <el-input
                  v-model="item.icon"
                  placeholder="请输入图标名称"
                  size="small"
                />
              </el-form-item>
            </div>


          </div>

          <el-button
            type="primary"
            icon="Plus"
            @click="addItem"
            style="width: 100%; margin-top: 10px;"
          >
            添加导航项
          </el-button>
        </div>
      </el-form-item>

      <el-divider>背景设置</el-divider>

      <el-form-item label="背景颜色">
        <el-color-picker v-model="data.backgroundColor" />
      </el-form-item>

      <el-form-item label="背景图片">
        <ImagePicker 
          :initial-image="data.backgroundImage ? { url: data.backgroundImage } : null"
          @select="handleBackgroundImageSelect"
        />
      </el-form-item>

      <el-divider>图标设置</el-divider>

      <el-form-item v-if="data.navigationType === 'icon'" label="图标大小">
        <el-slider 
          v-model="data.iconSize" 
          :min="16" 
          :max="48" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item v-if="data.navigationType === 'icon'" label="图标颜色">
        <el-color-picker v-model="data.iconColor" />
      </el-form-item>

      <el-form-item v-else label="图片大小">
        <el-slider 
          v-model="data.imageSize" 
          :min="20" 
          :max="80" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item v-else label="图片圆角">
        <el-slider 
          v-model="data.imageBorderRadius" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-divider>文字设置</el-divider>

      <el-form-item label="文字大小">
        <el-slider 
          v-model="data.textSize" 
          :min="10" 
          :max="20" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="文字颜色">
        <el-color-picker v-model="data.textColor" />
      </el-form-item>

      <el-form-item label="文字高度">
        <el-slider 
          v-model="data.textHeight" 
          :min="16" 
          :max="40" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-divider>边距设置</el-divider>

      <el-form-item label="内边距">
        <el-slider 
          v-model="data.padding" 
          :min="0" 
          :max="20" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="圆角大小">
        <el-slider 
          v-model="data.borderRadius" 
          :min="0" 
          :max="20" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-divider>外边距设置</el-divider>

      <el-form-item label="上边距">
        <el-slider 
          v-model="styles.marginTop" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="下边距">
        <el-slider 
          v-model="styles.marginBottom" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="左边距">
        <el-slider 
          v-model="styles.marginLeft" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>      
    </el-form>
  </div>
</template>

<script setup>
import { Delete, Plus } from '@element-plus/icons-vue'
import ImagePicker from '@/components/ImagePicker/index.vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['update:data', 'update:styles'])

// 方法
function addItem() {
  if (!props.data.items) {
    props.data.items = []
  }

  props.data.items.push({
    text: '',
    image: '',
    icon: '',
    url: ''
  })

  emit('update:data', props.data)
}

function removeItem(index) {
  if (index >= 0 && index < props.data.items.length) {
    props.data.items.splice(index, 1)
    emit('update:data', props.data)
  }
}

// 处理背景图片选择
function handleBackgroundImageSelect(image) {
  if (image && image.url) {
    props.data.backgroundImage = image.url
    emit('update:data', { ...props.data })
  }
}

// 处理导航项图片选择
function handleItemImageSelect(image, index) {
  if (image && image.url && index >= 0 && index < props.data.items.length) {
    props.data.items[index].image = image.url
    emit('update:data', { ...props.data })
  }
}
</script>

<style lang="scss" scoped>
.graphic-navigation-panel {
  padding: 10px;

  .navigation-items {
    width: 100%;

    .navigation-item {
      border: 1px solid #ebeef5;
      border-radius: 4px;
      padding: 10px;
      margin-bottom: 15px;
      background-color: #fafafa;
      
      .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        
        .item-index {
          display: inline-block;
          width: 24px;
          height: 24px;
          line-height: 24px;
          text-align: center;
          background-color: #409eff;
          color: white;
          border-radius: 50%;
          font-size: 12px;
        }
      }
      
      .item-content {
        .el-form-item {
          margin-bottom: 10px;
        }
        
        .image-picker-container {
          width: 100%;
          margin-bottom: 10px;
          
          :deep(.image-picker) {
            width: 100%;
            display: flex;
            flex-direction: column;
            
            .el-upload {
              width: 100%;
            }
            
            .image-preview {
              margin-top: 8px;
              display: flex;
              justify-content: center;
              
              img {
                max-width: 100%;
                max-height: 120px;
                object-fit: contain;
              }
            }
          }
        }
        
        .el-form-item {
          
          .image-picker-wrapper {
            display: flex;
            flex-direction: column;
            width: 100%;
            
            :deep(.image-picker) {
              width: 100%;
              display: flex;
              flex-direction: column;
              
              .el-upload {
                width: 100%;
                margin-bottom: 8px;
              }
              
              .image-preview {
                margin-top: 8px;
                max-width: 100%;
                display: flex;
                justify-content: center;
                
                img {
                  max-width: 100%;
                  max-height: 120px;
                  object-fit: contain;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
